<template>
  <div class="container">
    <img class="icon-left" :src="iconLeft" v-if="iconLeft"/>
    <span class="title-left" v-text="textLeft"></span>
    <div class="expand"></div>
    <span class="title-right" v-text="textRight"></span>
    <img class="icon-right" :src="iconRight" v-if="iconRight"/>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'cell',

    data() {
      return {};
    },
    props: {
      textLeft: {
        type: String,
        required: true,
        default: 'text-left-required!!!'
      },
      textRight: {
        type: String,
        default: null
      },
      iconLeft: {
        type: String,
        default: null
      },
      iconRight: {
        type: String,
        default: null
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .container
    width 100%
    display flex
    justify-content flex-end
    align-items center
    background white
    height cell-height

  .icon-left
    margin-left cell-margin
    width cell-icon-width

  .icon-right
    margin-right cell-margin
    width vw(15)

  .title-left
    margin-left cell-margin
    word-main()

  .title-right
    margin-right cell-margin
    word-main()

  .expand
    flex 1

</style>
